import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import 'moment-timezone';
import { FormattedMessage, injectIntl } from 'react-intl';

import {

  DateRangeWrapper,
  Col,

  Row,
} from '@folio/stripes/components';
import TimePerfectChoice from '../../util/DateCustomize/TimePerfectChoice';
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';

class CafeTableFourAboutTime extends Component {
  render() {
    const getter = (e, value) => {
      return value;
    };
   const {intl}= this.props
    return (
      <Row style={{ width: '100%' }} center="xs">
        <Col xs={12}>
          <DateRangeWrapper
            initialStartDate="2020-01-01"
            initialEndDate="2099-01-01"
            startValueGetter={getter}
            endValueGetter={getter}
          >
            {({
              getStartInputProps,
              getEndInputProps,
              endDateExclude,
              startDateExclude,
            }) => (
              <Row style={{ width: '100%' }}>
                <Col xs={2}>
                  <Field
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.reserveStartDate"
                      />
                                        }
                    required
                    name="reserveStartDate"
                    component={DatePerfectChoice}
                    exclude={startDateExclude}
                    dateFormat="YYYY-MM-DD"
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                    readOnly

                    onRef={this.startDateRef}
                    {...getStartInputProps()}
                  />
                </Col>
                <Col style={{ visibility: 'hidden' }}>-</Col>
                <Col xs={2}>
                  <Field
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.reserveStartTime"
                      />
                                        }
                    required
                    defaultHour="09"
                    defaultMinute="00"
                    name="reserveStartTime"
                    component={TimePerfectChoice}
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                  />
                </Col>
                <Col style={{ visibility: 'hidden' }}>-</Col>
                <Col xs={2}>
                  <Field
                    required
                    name="reserveEndDate"
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.reserveEndDate"
                      />
                                        }
                    component={DatePerfectChoice}
                    exclude={endDateExclude}
                    readOnly
                    dateFormat="YYYY-MM-DD"
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                    onRef={this.endDateRef}
                    {...getEndInputProps()}
                  />
                </Col>
                <Col style={{ visibility: 'hidden' }}>-</Col>
                <Col xs={2}>
                  <Field
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.reserveEndTime"
                      />
                                        }
                    required
                    defaultHour="17"
                    defaultMinute="00"
                    name="reserveEndTime"
                    component={TimePerfectChoice}
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                  />
                </Col>
              </Row>
            )
                        }
          </DateRangeWrapper>
        </Col>
        <Col xs={12}>
          <DateRangeWrapper
            initialStartDate="2020-01-01"
            initialEndDate="2099-01-01"
            startValueGetter={getter}
            endValueGetter={getter}
          >
            {({
              getStartInputProps,
              getEndInputProps,
              endDateExclude,
              startDateExclude,
            }) => (
              <Row style={{ width: '100%' }}>
                <Col xs={2}>
                  <Field
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.attendStartDate"
                      />
                                        }
                    name="attendStartDate"
                    component={DatePerfectChoice}
                    exclude={startDateExclude}

                    readOnly
                    dateFormat="YYYY-MM-DD"
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                    required
                    onRef={this.startDateRef}
                    {...getStartInputProps()}
                  />
                </Col>
                <Col style={{ visibility: 'hidden' }}>-</Col>
                <Col xs={2}>
                  <Field
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.attendStartTime"
                      />
                                        }
                    required

                    defaultHour="09"
                    defaultMinute="00"
                    name="attendStartTime"
                    component={TimePerfectChoice}
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                  />
                </Col>
                <Col style={{ visibility: 'hidden' }}>-</Col>
                <Col xs={2}>
                  <Field
                    required
                    name="attendEndDate"
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.attendEndDate"
                      />
                                        }
                    component={DatePerfectChoice}
                    exclude={endDateExclude}
                    readOnly

                    dateFormat="YYYY-MM-DD"
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                    onRef={this.endDateRef}
                    {...getEndInputProps()}
                  />
                </Col>
                <Col style={{ visibility: 'hidden' }}>-</Col>
                <Col xs={2}>
                  <Field
                    label={
                      <FormattedMessage
                        id="ui-party.loans.columns.party.attendEndTime"
                      />
                                        }
                    required
                    defaultHour="17"
                    defaultMinute="00"
                    name="attendEndTime"
                    component={TimePerfectChoice}
                    locale={intl.locale}
                    timeZone={intl.timeZone}
                  />
                </Col>
              </Row>
            )
                        }
          </DateRangeWrapper>
        </Col>

      </Row>
    );
  }
}

export default injectIntl(CafeTableFourAboutTime);
